<template>
    <div>
        <el-form ref="ruleFormRef" :model="CommentsForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item>
                <el-button type="primary" @click="router.back">返回</el-button>
            </el-form-item>
            <el-form-item label="评论分类" prop="goodsTypeId">
                <el-select v-model="CommentsForm.commentsTypeId" class="m-2" placeholder="Select">
                    <el-option v-for="item in commentsTypeOptions.commentsType" :key="item.id" :label="item.commentsType"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="评论图片" prop="commentsPicture">
                <el-upload class="commentsPicture-uploader" action="http://localhost:8888/comments/uploadCommentsPicture"
                    :show-file-list="false" :on-success="handleCommentsPictureSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="commentsPicture" style="width: 178px; height: 178px;" />
                    <el-icon v-else class="commentsPicture-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="评论" prop="comments">
                <editor v-model="CommentsForm.comments"></editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    发布
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElNotification, FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRoute } from 'vue-router'
import router from '@/router'
import Editor from '@/components/TinymceEditor.vue'
import api from '@/api';

const route = useRoute()



const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const CommentsForm = ref({
    userId:route.params.userId,
    goodsId:route.params.goodsId,
    comments:'',
    commentsTypeId:'',
    commentsPicture: '',
    ordersId: route.params.ordersId
})


const rules = reactive<FormRules>({
    comments: [
        {
            required: true,
            message: '评论不能为空',
            trigger: 'input',
        },
    ],
    commentsTypeId: [
        {
            required: true,
            message: '评论分类不能为空',
            trigger: 'blur',
        },
    ],
})

const commentsTypeOptions = reactive({
    commentsType: [] as any
})

// 异步请求获取下拉框选项
api.comments.getCommentsTypeList()
    .then(response => {
        commentsTypeOptions.commentsType = response.data.data;
    });

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.comments.addComments(CommentsForm.value)
                .then(response => {
                    // 在这里可以处理提交成功后的逻辑
                    ElNotification({
                        title: 'Success',
                        message: response.data.msg,
                        type: 'success',
                        duration: 1500
                    })
                    formEl.resetFields()
                    imageUrl.value = ''
                })
                .catch(error => {
                    ElNotification({
                        title: 'Error',
                        message: error.data.msg,
                        type: 'error',
                        duration: 1500
                    })
                    // 在这里可以处理提交失败后的逻辑
                });
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    imageUrl.value = ''
}

const imageUrl = ref('')
// 如果已有头像，则将头像地址赋值给 imageUrl
if (Array.isArray(route.params.commentsPicture) && route.params.commentsPicture.length > 0) {
    imageUrl.value = route.params.commentsPicture[0]
} else if (typeof route.params.commentsPicture === 'string') {
    imageUrl.value = route.params.commentsPicture
}
const handleCommentsPictureSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    CommentsForm.value.commentsPicture = response.msg
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

</script>

<style>
.commentsPicture-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.commentsPicture-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.commentsPicture-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>